<!--
* @description 人物属性模拟器
* @fileName simulator.vue
* @author huangyu
* @date 2022/05/30 16:09:38
!-->
<template>
    <div class="aionSimulator">
        <el-row v-if="isShow">
            <el-col :span="3">
                <div class="shouhu" :style="{height:menuHeight+'px'}" @click="occAttrData('shouhu')">
                    <div>守护星</div>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="jianxing" :style="{height:menuHeight+'px'}" @click="occAttrData('jianxing')">
                    <div>剑星</div>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="zhiyu" :style="{height:menuHeight+'px'}" @click="occAttrData('zhiyu')">
                    <div>治愈</div>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="hufa" :style="{height:menuHeight+'px'}" @click="occAttrData('hufa')">
                    <div>护法</div>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="shaxing" :style="{height:menuHeight+'px'}" @click="occAttrData('shaxing')">
                    <div>杀星</div>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="gongxing" :style="{height:menuHeight+'px'}" @click="occAttrData('gongxing')">
                    <div>弓星</div>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="modao" :style="{height:menuHeight+'px'}" @click="occAttrData('modao')">
                    <div>魔道</div>
                </div>
            </el-col>
            <el-col :span="3">
                <div class="jingling" :style="{height:menuHeight+'px'}" @click="occAttrData('jingling')">
                    <div>精灵</div>
                </div>
            </el-col>
        </el-row>
        <div class="" v-else>
            <div :style="{background:'url('+bgImage+') no-repeat',height:menuHeight+'px'}">
                <el-form :inline="true" style="padding:10px 0 0 10px;">
                    <!-- <el-form-item label="物品名称">
                        <el-input placeholder="物品名称" v-model="name"></el-input>
                    </el-form-item> -->
                    <el-form-item>
                        <el-button type="primary" plain @click="goBack">返回</el-button>
                    </el-form-item>
                    <el-form-item >
                        <el-select v-model="ZYTypeStr" style="width:100px" @change="changeZYTypeStr">
                            <el-option
                            v-for="(item,index) in ZYTypeList"
                            :key="index"
                            :label="item.label"
                            :value="item.key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="level" style="width:100px">
                            <el-option label="50级" value="50"></el-option>
                            <el-option label="55级" value="55"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="warning" @click="clickChangeTZ">选择套装</el-button>
                    </el-form-item>
                    
                    <el-form-item>
                        <el-button type="primary" plain @click="clickAttrPre">预览属性</el-button>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="info" plain v-if="tzRow.name" @click="clickTZDetail">{{tzRow.name}}</el-button>
                        <el-button type="danger" plain v-if="tzRow.name" @click="delTZDetail">删除套装</el-button>
                    </el-form-item>
                </el-form>
                <!-- {{attrPreData}} -->
                <vCalc :occAttr="occAttrModel" :tzRow="tzRow" @calcCount="calcCount"></vCalc>
                <vAttrPre :attr="attrPreData" v-if="isAttrPre"></vAttrPre>
            </div>
        </div>

        <!-- 选择套装 -->
        <el-dialog :visible.sync="dialogTZList" top="50px" width="1280px" title="选择套装" append-to-body>
            <vtzList @rowData="rowData" :isComponents="true"></vtzList>
        </el-dialog>

        <!-- 套装详情 -->
        <el-dialog :visible.sync="dialogDetail" width="550px" top="50px" title="套装详情" append-to-body v-dialogDrag>
            <vtzDetail :model="tzRow"></vtzDetail>
        </el-dialog>
    </div>
</template>

<script>
import {ZYType} from "@/components/game/aion/data.js"
import {shouhu,jianxing,zhiyu,hufa,shaxing,gongxing,modao,jingling} from "@/components/game/aion/occAttr.js"
import vCalc from "./calc.vue"
import vAttrPre from "./attrPre.vue"
import vtzList from "./tzList.vue"
import vtzDetail from './tzDetail.vue'
export default {
    components: {vCalc,vAttrPre,vtzList,vtzDetail},
    data() {
        return {
            menuHeight: document.documentElement.clientHeight,
            // occAttrStr: '剑星',
            occAttrModel: {},
            isAttrPre: false,
            bgImage: '',
            isShow: true,
            ZYTypeStr: '',
            ZYTypeList: ZYType,
            level: '50',
            attrPreData: {},

            dialogTZList: false,
            tzRow: {},

            dialogDetail: false,
        }
    },
    mounted() {
        // this.occAttrData(this.occAttrStr)
    },
    methods: {
        // 基础属性
        occAttrData(val){
            this.isShow = false
            this.ZYTypeStr = val
            if(val == 'shouhu'){
                this.occAttrModel = shouhu
            }else if(val == 'jianxing'){
                this.occAttrModel = jianxing
            }else if(val == 'zhiyu'){
                this.occAttrModel = zhiyu
            }else if(val == 'hufa'){
                this.occAttrModel = hufa
            }else if(val == 'shaxing'){
                this.occAttrModel = shaxing
            }else if(val == 'gongxing'){
                this.occAttrModel = gongxing
            }else if(val == 'modao'){
                this.occAttrModel = modao
            }else if(val == 'jingling'){
                this.occAttrModel = jingling
            }
            this.bgImage = '/aion/images/game/icon/' + val + '.jpg'
        },
        goBack(){
            this.isShow = true
        },
        changeZYTypeStr(val){
            this.occAttrData(val)
        },
        calcCount(val){
            // console.log("val")
            // console.log(val)
            var listRes = JSON.parse(JSON.stringify(val))
            this.attrPreData = listRes
        },
        clickAttrPre(){
            if(this.attrPreData&&!(JSON.stringify(this.attrPreData)=='{}')){
                this.isAttrPre = !this.isAttrPre
            }else{
                this.$message.error("装备不能都为空！")
            }
        },

        clickChangeTZ(){
            this.dialogTZList = true
        },
        rowData(row) {
            this.dialogTZList = false
            this.tzRow = row
        },

        clickTZDetail(){
            this.dialogDetail = true
        },
        delTZDetail(){
            this.tzRow = {}
        },
    },
}
</script>

<style scoped>
</style>